<template>
  <!-- 有关协力 -->
  <div class="about">
    <!-- 组件标题 -->
    <div class="title">
      <div class="text">ABOUT US</div>
      <!-- <p>We are committed to providing our clients with professional legal services</p> -->
    </div>
    <div class="box">
      <div class="introduce">
        <div class="introduce_fan">
          <h3>A brief introduction</h3>
          <p v-html="desc"></p>
          <router-link :to="{name:'en_aboutUs'}" class="more clearfloat">
            <span>more</span>
            <div class="red_you">
              <!-- <img class="imgX" src="@/assets/images/red_you.png" alt="更多" /> -->
            </div>
          </router-link>
          <div class="point">
            <img class="imgX" src="@/assets/images/point.png" alt="点" />
          </div>
        </div>
        <div class="logo2">
          <img src="@/assets/images/logo2.png" alt="LoGO" />
        </div>
      </div>

      <div class="details_nav">
        <!-- <img class="details_bg imgX" src="@/assets/images/about_bg.png" alt /> -->
        <video style="width= 100%; height=100%; object-fit:cover" ref="video" controls></video>
        <div class="nav_list">
          <swiper id="swiperOption" ref="swiper_aboutUs" :options="swiperOption2">
            <swiper-slide class="swiper-slide" style="width:25%;">
              <router-link :to="{name:'en_overview'}" class="slide_item">
                <img class="icon" src="@/assets/images/aboutUs_icon_01.png" alt="文化" />
                <p>overview</p> 
                <!-- OVERVIEW -->
              </router-link>
            </swiper-slide>
            <swiper-slide class="swiper-slide" style="width:25%;">
              <router-link :to="{name:'en_honor'}" class="slide_item">
                <img class="icon" src="@/assets/images/aboutUs_icon_02.png" alt="文化" />
                     <p>honor</p>
                <!-- <p>HONOR</p> -->
              </router-link>
            </swiper-slide>
            <swiper-slide class="swiper-slide" style="width:25%;">
              <router-link :to="{name:'en_duty'}" class="slide_item">
                <img class="icon" src="@/assets/images/aboutUs_icon_03.png" alt="文化" />
                <!-- <p>RESPONSIBILITY</p> -->
                <p>responsibility</p>
              </router-link>
            </swiper-slide>
            <swiper-slide class="swiper-slide" style="width:25%;">
              <router-link :to="{name:'en_lectureHall'}" class="slide_item">
                <img class="icon" src="@/assets/images/aboutUs_icon_04.png" alt="文化" />
                <!-- <p>CLASSROOM</p> -->
                <p>classroom</p>
              </router-link>
            </swiper-slide>
          </swiper>
          <!-- 箭头左 -->
          <!-- <div
            id="swiper-button-prev2"
            class="swiper-button-prev swiper-button-prev2 prev"
            slot="button-prev"
          ></div> -->
          <!-- 箭头右 -->
          <!-- <div
            id="swiper-button-next2"
            class="swiper-button-next swiper-button-next2 next"
            slot="button-next"
          ></div> -->
        </div>
      </div>
    </div>

    <router-link :to="{name:'en_aboutUs'}" class="about_base">
      <span>MORE</span>
      <!-- 箭头背景 -->
      <i></i>
    </router-link>
  </div>
</template>
<script>
import { company_type_list } from "@/api/about.js";
export default {
  data() {
    return {
      desc: "",
      video: null,
      culture: "",
      //有关协力滑块视图
      swiperOption2: {
        slidesPerView: 'auto',
        //设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next2",
          prevEl: ".swiper-button-prev2",
        },
        //鼠标变成抓手型
        grabCursor: true,
      },
    };
  },
  // watch: {
  //   "$store.state.headTitle.clientW": {
  //     deep: true,
  //     handler: function (newValue, oldValue) {
  //       // 设置一个定时器 避免多次触发
  //       clearTimeout(this.Timeout);
  //       this.Timeout = setTimeout(() => {
  //         if (newValue > 1300) {
  //           this.$refs.swiper_aboutUs.swiper.params.slidesPerView = 4;

  //         } else if (newValue > 1200) {
  //           this.$refs.swiper_aboutUs.swiper.params.slidesPerView = 3;
  //         }

  //       }, 200);
  //     },
  //   },
  // },
  mounted() {
    company_type_list().then((res) => {
      console.log("", res);
      res.data.data[3].map((item) => {
        item.desc_array = item.desc.split("；");
      });
      this.desc = res.data.data[1].content;
      this.$refs.video.src =
        this.$store.state.headTitle.urlLink + res.data.data[1].video;
      // this.video = this.$store.state.headTitle.urlLink + res.data.data[1].video;
      this.culture = res.data.data[3];
    });
  },
};
</script>
<style scoped src="./sass/home.css"></style>